<template>
  <!-- 容器 -->
  <el-card>
    <!-- 顶部导航 -->
    <div slot="header" class="clearfix">
      <!-- 步骤条组件 -->
      <el-steps :active="nowSteps" simple>
        <!-- 循环遍历数据添加结构，添加点击事件（更改当前步骤） -->
        <el-step v-for="item in steps" :key="item.id" :title="item.title" :icon="item.icon" @click.native="nowSteps = item.id"></el-step>
      </el-steps>
    </div>
    <!-- 底部表单 -->
    <el-form ref="form" :model="form" label-width="80px">
      <!-- 基本信息 -->
      <div v-show="nowSteps === 0">
        <el-form-item label="课程名称">
          <el-input v-model="form.courseName" placeholder="请输入课程名称"></el-input>
        </el-form-item>
        <el-form-item label="课程简介">
          <el-input v-model="form.brief" placeholder="请输入课程简介"></el-input>
        </el-form-item>
        <el-form-item label="课程概述">
          <!-- 设置样式让两个输入框在一行显示 -->
          <el-input v-model="form.previewFirstField" style="width: 49%; minwidth: 300px; margin-right: 10px" placeholder="请输入第一条课程概述">
            <!-- 使用slot="append"在后天添加单位或者描述 -->
            <template slot="append">0 / 20</template>
          </el-input>
          <el-input v-model="form.previewSecondField" style="width: 49%; minwidth: 300px;" placeholder="请输入第二条课程概述"></el-input>
        </el-form-item>
        <el-form-item label="讲师姓名">
          <el-input v-model="form.teacherDTO.teacherName" placeholder="请输入讲师姓名"></el-input>
        </el-form-item>
        <el-form-item label="讲师简介">
          <el-input v-model="form.teacherDTO.description" placeholder="请输入讲师简介"></el-input>
        </el-form-item>
        <el-form-item label="课程排序">
          <el-input-number v-model="form.sortNum" controls-position="right" :min="1"></el-input-number>
        </el-form-item>
      </div>
      <!-- 课程封面 -->
      <div v-show="nowSteps === 1">
        <!-- 创建子组件实例，使用v-model双向绑定 -->
        <!-- 课程封面 -->
        <upload-img v-model="form.courseListImg" title="课程封面"></upload-img>
        <!-- 解锁封面 -->
        <upload-img v-model="form.courseImgUrl" title="解锁封面"></upload-img>
      </div>
      <!-- 销售信息 -->
      <div v-show="nowSteps === 2">
        <el-form-item label="售卖价格">
          <el-input v-model="form.discounts" placeholder="请输入售卖价格">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="商品原价">
          <el-input v-model="form.price" placeholder="请输入商品原价">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="销量">
          <el-input v-model="form.sales" placeholder="请输入销量">
            <template slot="append">单</template>
          </el-input>
        </el-form-item>
        <el-form-item label="活动标签">
          <el-input v-model="form.discountsTag" placeholder="请输入活动标签"></el-input>
        </el-form-item>
      </div>
      <!-- 限时秒杀 -->
      <div v-show="nowSteps === 3">
        <!-- 开关组件，绑定数据 -->
        <el-form-item label="限时秒杀开关" label-width="120px">
          <el-switch
            v-model="form.activityCourse"
            active-color="#409eff"
            >
          </el-switch>
        </el-form-item>
        <!-- 限时秒杀信息，根据秒杀开关是否打开决定是否显示 -->
        <div v-if="form.activityCourse">
          <el-form-item label="开始时间">
            <el-date-picker
              v-model="form.activityCourseDTO.beginTime"
              type="datetime"
              placeholder="选择开始日期时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间">
            <el-date-picker
              v-model="form.activityCourseDTO.endTime"
              type="datetime"
              placeholder="选择结束日期时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="秒杀价">
            <el-input v-model="form.activityCourseDTO.amount" placeholder="请输入秒杀价">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="库存">
            <el-input v-model="form.activityCourseDTO.stock" placeholder="请输入库存">
              <template slot="append">个</template>
            </el-input>
          </el-form-item>
        </div>
      </div>
      <!-- 课程详情 -->
      <div v-show="nowSteps === 4">
        <el-form-item label="课程详情">
          <!-- 创建富文本编辑器组件实例 -->
          <editor v-model="form.courseDescriptionMarkDown"></editor>
        </el-form-item>
        <!-- 开关组件，绑定数据 -->
        <el-form-item label="立即上架">
          <el-switch
            v-model="form.status"
            active-color="#409eff"
            :active-value="1"
            :inactive-value="0"
            >
          </el-switch>
        </el-form-item>
      </div>
      <!-- 最下方按钮 -->
      <el-form-item>
        <!-- 下一步按钮前四步都显示可跳转到下一步 -->
        <el-button v-show="nowSteps < 4" @click="nowSteps += 1" type="primary">下一步</el-button>
        <!-- 保存按钮只有最后一步才显示，用于保存数据，添加点击事件 -->
        <el-button v-show="nowSteps === 4"  type="primary" @click="preservationCoures">保存</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
// 引入富文本编辑器
import editor from '@/components/editor'
// 引入子组件
import uploadImg from './uploadImg'
// 引入封装的保存课程功能
import { saveOrUpdateCourse, getCourseById } from '@/services/coures'
export default {
  name: 'addOrEdit',
  props: ['courseId'],
  data () {
    return {
      // 当前步骤
      nowSteps: 0,
      // 步骤条组件数据
      steps: [
        { id: 0, title: '基本信息', icon: 'el-icon-edit' },
        { id: 1, title: '课程封面', icon: 'el-icon-picture-outline' },
        { id: 2, title: '销售信息', icon: 'el-icon-shopping-cart-full' },
        { id: 3, title: '秒杀信息', icon: 'el-icon-present' },
        { id: 4, title: '课程详情', icon: 'el-icon-document' }
      ],
      // form表单
      form: {
        // id: 0,
        // 课程名称
        courseName: '',
        // 课程简介
        brief: '',
        teacherDTO: {
          // id: 0,
          // courseId: 0,
          // 讲师姓名
          teacherName: '',
          // teacherHeadPicUrl: '',
          // position: '',
          // 讲师简介
          description: ''
        },
        // 课程详情/描述信息
        courseDescriptionMarkDown: '',
        // 原价
        price: null,
        // 优惠价格
        discounts: null,
        // priceTag: '',
        // 活动标签
        discountsTag: '',
        // isNew: true,
        // isNewDes: '',
        // 课程列表展示图片
        courseListImg: '',
        // 课程解锁封面
        courseImgUrl: '',
        // 课程排序
        sortNum: 0,
        // 课程概述/预览第一段
        previewFirstField: '',
        // 课程概述/预览第二段
        previewSecondField: '',
        // 当课程前状态
        status: 0,
        // 销量
        sales: null,
        // 是否开启秒杀
        activityCourse: false,
        activityCourseDTO: {
          // id: 0,
          // courseId: 0,
          // 开始时间
          beginTime: '',
          // 结束时间
          endTime: '',
          // 秒杀价格
          amount: 0,
          // 库存
          stock: 0
        }
        // autoOnlineTime: ''
      }
    }
  },
  // 钩子函数
  created () {
    // 判断是否带着课程id，如果带着id调用方法获取id信息
    if (this.courseId) {
      this.getCourse(this.courseId)
    }
  },
  // 注册组件
  components: {
    uploadImg,
    editor
  },
  methods: {
    // 根据id获取课程信息
    async getCourse (courseId) {
      // 调用接口或获取信息
      const { data } = await getCourseById(courseId)
      if (data.code === '000000') {
        // 如果获取成功，判断是否开启了秒杀
        if (!data.data.activityCourse) {
          // 如果没有开启秒杀，补全秒杀需要的数据，防止报错
          data.data.activityCourseDTO = {
            beginTime: '',
            endTime: '',
            amount: 0,
            stock: 0
          }
        }
        // 把数据交给表单
        this.form = data.data
      }
    },
    // 保存按钮点击事件函数
    async preservationCoures () {
      // 调用接口
      const { data } = await saveOrUpdateCourse(this.form)
      if (data.code === '000000') {
        // 如果保存成功，弹出提示信息，跳转回课程管理页面
        this.$message({
          message: '保存成功',
          type: 'success'
        })
        this.$router.push('/course')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
// 步骤条
.el-step {
  // 手型鼠标
  cursor: pointer
}
</style>
